<template>
  <!-- 导览:在线订票 游览路线 游览须知 馆内资讯-->
  <div>
<!--    Space 间距组件-->
    <div style="margin-bottom: 15px">
      方向选择:
      <el-radio v-model="direction" label="horizontal">水平布局</el-radio>
      <el-radio v-model="direction" label="vertical">垂直布局</el-radio>
    </div>
    <div style="margin-bottom: 15px">
      自动填充比例:<el-slider v-model="fillRatio" />
    </div>
    <el-space
        fill
        wrap
        :fill-ratio="fillRatio"
        :direction="direction"
        style="width: 100%">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>馆内资讯</span>
            <el-button class="button" text>Operation button</el-button>
          </div>
        </template>
        <div v-for="o in 4" :key="o" class="text item">
          {{ 'List item ' + o }}
        </div>
      </el-card>

      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>在线预订</span>
            <el-button class="button" text>Operation button</el-button>
          </div>
        </template>
        <div v-for="o in 4" :key="o" class="text item">
          {{ 'List item ' + o }}
        </div>
      </el-card>

      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>馆中公告</span>
<!--            更多的小功能,点击跳转到公告页面-->
<!--            <el-button class="button" text>Operation button</el-button>-->
          </div>
        </template>
<!--        -->
        <div v-for="item in noticeData" :key="item" class="text item">
          <div class="itemLi">
            <div>{{item.title}}</div>
            <div>{{item.createTime}}</div>
          </div>
        </div>
      </el-card>

      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>游览须知</span>
            <el-button class="button" text>Operation button</el-button>
          </div>
        </template>

        <div v-for="o in 4" :key="o" class="text item">
          {{ 'List item ' + o }}
        </div>
      </el-card>



    </el-space>
  </div>
</template>

<script setup>
import { onMounted,ref } from 'vue'
import request from "../../../../front_admin/src/utils/request";

const direction = ref('horizontal')
const fillRatio = ref(25)

const onload=()=>{
  request.get('/notice/page',{
    //params先写死,后面改为动态
    params: {
      pageNum: 1,
      pageSize: 10,
      title: ''
    },
  }).then(res => {
    if(res.code === '200') {
      let noticeList = res.data.list
      noticeList.map((item) => {
        noticeData.value.push({title:item.title,createTime:item.createTime})
      })
      // this.total = res.data.total
      console.log("notice内容是",noticeData)
    }
  })
}

onMounted(()=>{
  onload()
})
 //立即响应的空数组
 const noticeData =ref([])
</script>

<style scoped>
.text{
  color: #24dcf3;
}
.item{
  height:120px;
}
.itemLi{
  display: flex;
  justify-content:space-between;
}
</style>